<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑发票</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-orange-500 to-red-500 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-invoice.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">编辑发票</h1>
                <button onclick="saveDraft()" class="text-white hover:opacity-80">
                    <i class="fas fa-save text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Draft Status Banner -->
        <div class="bg-yellow-50 border-b border-yellow-200 px-4 py-2">
            <div class="flex items-center">
                <i class="fas fa-exclamation-triangle text-yellow-600 mr-2"></i>
                <div>
                    <p class="text-sm text-yellow-800 font-medium">草稿状态</p>
                    <p class="text-xs text-yellow-700">申请编号: INV202501050002</p>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="h-[calc(852px-180px)] overflow-y-auto pb-4">
            <form id="invoiceEditForm">
                <!-- Invoice Type -->
                <div class="bg-white border-b border-gray-200">
                    <div class="px-4 py-4">
                        <h3 class="font-medium mb-4 flex items-center">
                            <i class="fas fa-file-invoice text-blue-500 mr-2"></i>
                            发票类型
                        </h3>
                        
                        <div class="space-y-3">
                            <label class="flex items-center p-3 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-300">
                                <input type="radio" name="invoiceType" value="normal" class="mr-3">
                                <div class="flex-1">
                                    <p class="font-medium text-gray-700">普通发票</p>
                                    <p class="text-xs text-gray-500 mt-1">适用于个人及一般企业</p>
                                </div>
                            </label>
                            <label class="flex items-center p-3 border-2 border-orange-500 bg-orange-50 rounded-lg cursor-pointer">
                                <input type="radio" name="invoiceType" value="vat" checked class="mr-3">
                                <div class="flex-1">
                                    <p class="font-medium text-orange-600">增值税专用发票</p>
                                    <p class="text-xs text-gray-500 mt-1">适用于一般纳税人企业，可抵扣税款</p>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Buyer Information -->
                <div class="bg-white border-b border-gray-200">
                    <div class="px-4 py-4">
                        <h3 class="font-medium mb-4 flex items-center">
                            <i class="fas fa-building text-green-500 mr-2"></i>
                            购买方信息
                        </h3>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">抬头名称 *</label>
                                <input type="text" id="buyerName" value="上海贸易公司" required
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
                            </div>
                            
                            <div id="vatInfo">
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">纳税人识别号 *</label>
                                        <input type="text" id="taxId" value="91310000MA12345678"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">注册地址 *</label>
                                        <input type="text" id="address" value="上海市浦东新区陆家嘴金融区100号"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
                                    </div>
                                    
                                    <div class="grid grid-cols-2 gap-3">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">注册电话 *</label>
                                            <input type="tel" id="phone" value="021-12345678"
                                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">开户银行 *</label>
                                            <input type="text" id="bank" value="浦发银行"
                                                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
                                        </div>
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">银行账号 *</label>
                                        <input type="text" id="bankAccount" value="1357924680135792468"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
                                    </div>
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">邮箱地址</label>
                                <input type="email" id="email" value="finance@shanghaits.com"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Invoice Content -->
                <div class="bg-white border-b border-gray-200">
                    <div class="px-4 py-4">
                        <h3 class="font-medium mb-4 flex items-center">
                            <i class="fas fa-list text-purple-500 mr-2"></i>
                            发票内容
                        </h3>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">发票项目</label>
                                <select id="invoiceItem" 
                                        class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
                                    <option value="">请选择发票项目</option>
                                    <option value="goods">商品销售</option>
                                    <option value="service" selected>技术服务</option>
                                    <option value="consulting">咨询服务</option>
                                    <option value="other">其他</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">发票内容</label>
                                <textarea id="invoiceContent" rows="3" 
                                          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent resize-none">电子商务平台技术服务费</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Amount Selection -->
                <div class="bg-white border-b border-gray-200">
                    <div class="px-4 py-4">
                        <h3 class="font-medium mb-4 flex items-center">
                            <i class="fas fa-money-bill text-orange-500 mr-2"></i>
                            开票金额
                        </h3>
                        
                        <div class="space-y-4">
                            <!-- Available Balance -->
                            <div class="bg-blue-50 rounded-lg p-3 border border-blue-200">
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-600">可开票金额</span>
                                    <span class="text-lg font-bold text-blue-600">¥168,526.80</span>
                                </div>
                                <p class="text-xs text-gray-500 mt-1">已扣除平台费用后的净收入</p>
                            </div>

                            <!-- Current Draft Amount Notice -->
                            <div class="bg-orange-50 rounded-lg p-3 border border-orange-200">
                                <div class="flex items-center">
                                    <i class="fas fa-info-circle text-orange-600 mr-2"></i>
                                    <div>
                                        <p class="text-sm text-orange-800 font-medium">当前草稿金额</p>
                                        <p class="text-xs text-orange-700">修改后需重新审核</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Amount Input -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">开票金额 *</label>
                                <div class="relative">
                                    <span class="absolute left-3 top-2 text-gray-500">¥</span>
                                    <input type="number" id="invoiceAmount" min="0" max="168526.80" step="0.01" value="8750.00" required
                                           class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
                                </div>
                                <p class="text-xs text-gray-500 mt-1">最低开票金额：¥100.00</p>
                            </div>

                            <!-- Quick Amount Buttons -->
                            <div class="grid grid-cols-3 gap-2">
                                <button type="button" onclick="setAmount(1000)" class="bg-gray-100 text-gray-700 py-2 rounded-lg text-sm hover:bg-gray-200">
                                    ¥1,000
                                </button>
                                <button type="button" onclick="setAmount(5000)" class="bg-gray-100 text-gray-700 py-2 rounded-lg text-sm hover:bg-gray-200">
                                    ¥5,000
                                </button>
                                <button type="button" onclick="setAmount(10000)" class="bg-gray-100 text-gray-700 py-2 rounded-lg text-sm hover:bg-gray-200">
                                    ¥10,000
                                </button>
                            </div>
                            
                            <button type="button" onclick="setMaxAmount()" class="w-full bg-blue-100 text-blue-600 py-2 rounded-lg text-sm hover:bg-blue-200">
                                全部金额 (¥168,526.80)
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Additional Options -->
                <div class="bg-white border-b border-gray-200">
                    <div class="px-4 py-4">
                        <h3 class="font-medium mb-4 flex items-center">
                            <i class="fas fa-cog text-gray-500 mr-2"></i>
                            附加选项
                        </h3>
                        
                        <div class="space-y-3">
                            <label class="flex items-center text-sm">
                                <input type="checkbox" id="urgentProcess" class="mr-2">
                                <span class="text-gray-700">加急处理 (+¥10 服务费)</span>
                            </label>
                            
                            <label class="flex items-center text-sm">
                                <input type="checkbox" id="emailNotify" checked class="mr-2">
                                <span class="text-gray-700">邮箱通知</span>
                            </label>
                            
                            <label class="flex items-center text-sm">
                                <input type="checkbox" id="smsNotify" class="mr-2">
                                <span class="text-gray-700">短信通知</span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Remarks -->
                <div class="bg-white">
                    <div class="px-4 py-4">
                        <h3 class="font-medium mb-3">备注信息</h3>
                        <textarea id="remarks" rows="3" placeholder="如有特殊要求请在此说明"
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent resize-none text-sm">B2B平台技术服务费用</textarea>
                    </div>
                </div>
            </form>
        </div>

        <!-- Bottom Actions -->
        <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
            <div class="flex gap-3">
                <button onclick="discardChanges()" class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-200 transition-colors">
                    <i class="fas fa-trash mr-2"></i>删除草稿
                </button>
                <button onclick="saveDraft()" class="flex-1 bg-yellow-100 text-yellow-700 py-3 rounded-lg font-medium hover:bg-yellow-200 transition-colors">
                    <i class="fas fa-save mr-2"></i>保存修改
                </button>
                <button onclick="submitInvoiceApplication()" class="flex-1 bg-gradient-to-r from-orange-500 to-red-500 text-white py-3 rounded-lg font-medium hover:opacity-90 transition-opacity shadow-lg">
                    <i class="fas fa-paper-plane mr-2"></i>提交申请
                </button>
            </div>
        </div>
    </div>

    <script>
        // Initialize page with existing data
        document.addEventListener('DOMContentLoaded', function() {
            // Load existing draft data
            loadDraftData();
            
            // Set up invoice type change handlers
            setupInvoiceTypeHandlers();
        });

        function loadDraftData() {
            // Simulate loading existing draft data
            const urlParams = new URLSearchParams(window.location.search);
            const invoiceId = urlParams.get('id');
            
            // This would typically load from server based on invoiceId
            // For now, we pre-populate with mock data
            showToast('已加载草稿数据');
        }

        function setupInvoiceTypeHandlers() {
            // Invoice type selection handlers
            document.querySelectorAll('input[name="invoiceType"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    const labels = document.querySelectorAll('label:has(input[name="invoiceType"])');
                    labels.forEach(label => {
                        label.classList.remove('border-orange-500', 'bg-orange-50');
                        label.classList.add('border-gray-200');
                        label.querySelector('p').classList.remove('text-orange-600');
                        label.querySelector('p').classList.add('text-gray-700');
                    });

                    this.closest('label').classList.remove('border-gray-200');
                    this.closest('label').classList.add('border-orange-500', 'bg-orange-50');
                    this.closest('label').querySelector('p').classList.remove('text-gray-700');
                    this.closest('label').querySelector('p').classList.add('text-orange-600');

                    // Show/hide VAT info
                    const vatInfo = document.getElementById('vatInfo');
                    if (this.value === 'vat') {
                        vatInfo.style.display = 'block';
                    } else {
                        vatInfo.style.display = 'none';
                    }
                });
            });
        }

        // Amount setting functions
        function setAmount(amount) {
            document.getElementById('invoiceAmount').value = amount.toFixed(2);
        }

        function setMaxAmount() {
            document.getElementById('invoiceAmount').value = '168526.80';
        }

        // Form actions
        function saveDraft() {
            const formData = gatherFormData();
            // Simulate saving draft
            showToast('草稿已保存');
            
            // Optional: Update last saved time indicator
            updateLastSavedTime();
        }

        function discardChanges() {
            if (confirm('确认删除此草稿？\n\n删除后将无法恢复，您将需要重新创建发票申请。')) {
                showToast('草稿已删除');
                setTimeout(() => {
                    window.location.href = 'b2b-invoice.html';
                }, 1500);
            }
        }

        function submitInvoiceApplication() {
            const formData = gatherFormData();
            
            // Validation
            if (!validateForm(formData)) {
                return;
            }

            if (confirm('确认提交发票申请？\n\n提交后将无法再次修改，请仔细核对信息是否正确。')) {
                // Success simulation
                showToast('发票申请提交成功！');
                
                setTimeout(() => {
                    window.location.href = 'b2b-invoice.html';
                }, 2000);
            }
        }

        function validateForm(formData) {
            // Basic validation
            if (!formData.buyerName) {
                showToast('请输入抬头名称');
                return false;
            }
            
            if (!formData.invoiceAmount || parseFloat(formData.invoiceAmount) < 100) {
                showToast('开票金额不能少于¥100.00');
                return false;
            }

            if (formData.invoiceType === 'vat') {
                if (!formData.taxId || !formData.address || !formData.phone || !formData.bank || !formData.bankAccount) {
                    showToast('增值税专用发票需要完善企业信息');
                    return false;
                }
            }

            return true;
        }

        function gatherFormData() {
            return {
                invoiceType: document.querySelector('input[name="invoiceType"]:checked').value,
                buyerName: document.getElementById('buyerName').value,
                taxId: document.getElementById('taxId').value,
                address: document.getElementById('address').value,
                phone: document.getElementById('phone').value,
                bank: document.getElementById('bank').value,
                bankAccount: document.getElementById('bankAccount').value,
                email: document.getElementById('email').value,
                invoiceItem: document.getElementById('invoiceItem').value,
                invoiceContent: document.getElementById('invoiceContent').value,
                invoiceAmount: document.getElementById('invoiceAmount').value,
                urgentProcess: document.getElementById('urgentProcess').checked,
                emailNotify: document.getElementById('emailNotify').checked,
                smsNotify: document.getElementById('smsNotify').checked,
                remarks: document.getElementById('remarks').value
            };
        }

        function updateLastSavedTime() {
            const now = new Date();
            const timeStr = now.toLocaleTimeString('zh-CN', { hour12: false });
            
            // Create or update a last saved indicator
            let indicator = document.getElementById('lastSavedIndicator');
            if (!indicator) {
                indicator = document.createElement('div');
                indicator.id = 'lastSavedIndicator';
                indicator.className = 'text-xs text-gray-500 mt-1';
                document.querySelector('.bg-yellow-50').appendChild(indicator);
            }
            indicator.textContent = `最后保存时间: ${timeStr}`;
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }
    </script>
</body>
</html>